<!DOCTYPE html>
<html>
	<head>
		<title>smAnchor test</title>
		<script src="../jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="../smanchor.jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			function startThisShit () {
				$.smAnchor(null, {
					'duration': 1000
				});
				return false;
			}

			function stopThisShit () {
				$.smAnchor(null, 'unbind');
				return false;
			}

			$(document).ready(function () {
				startThisShit();
			});
		</script>
	</head>
	<body>
<style type="text/css">
.ololo {
	width: 200px;
	height: 200px;
	overflow: auto;
	border: 1px solid #000;
	position: relative;
	top: 100px;
	padding: 10px;
	margin: 15px;
}
</style>
<div class="ololo">
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<a name="sec1">Section 1</a>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<a name="sec2">Section 2</a>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<a name="sec3">Section 3</a>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
		<p>OLOLO!!!</p>
</div>
		<ul style="position:fixed;right:10px;top:10px;">
			<li><a href="#sec1">Goto Section 1</a></li>
			<li><a href="#sec2">Goto Section 2</a></li>
			<li><a href="#sec3">Goto Section 3</a></li>
			<li><a href="ololo" onclick="return stopThisShit();">Stop this sh*t</a></li>
			<li><a href="ololo" onclick="return startThisShit();">Start this sh*t again</a></li>
		</ul>
	</body>
</html>
